<template lang="pug">
    li.nav-item.dropdown.no-caret
        a.nav-link.dropdown-toggle#navbarDropdownDocs(href='javascript:void(0)' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
            | {{title}}
            font-awesome-icon.dropdown-arrow(:icon='["fas", "chevron-right"]')
        .dropdown-menu.dropdown-menu-right.animated--fade-in-up(aria-labelledby='navbarDropdownDocs')
            template(v-for="(item,index) in itemList")
                router-link.dropdown-item.pt-2.pb-1.font-weight-400(:to="'/category/'+item.id" :key="item.id")
                    | {{item.name}}
                .dropdown-divider.m-0(v-if="index < itemList.length-1")

</template>

<script>
export default {
    name: 'menu-brief',
    props: {
        title: String,
        itemList: {
            type: Array,
            default: () => [
                { name: 'Overview', url: '#' },
                { name: 'Post', url: '#' },
                { name: 'Archive', url: '#' },
            ],
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
